<template>
	<div class="bim-drawer" :class="!visible ? '' : 'bim-drawer-open'">
		<transition>
			<router-view></router-view>
		</transition>
		<div class="bim-drawer-mask"></div>
		<div class="bim-drawer-left">
			<div class="bim-drawer-content-wrapper site-base-bg">
				<div class="bim-drawer-content">
					<div class="bim-drawer-wrapper-body">
						<div class="bim-drawer-body">
							<div class="main-content-drawer">
								<div class="video-monitor">
									<div class="line-block-placeholder"></div>
									<div class="header-block">
										<h3 class="box-title">综合监控</h3>
										<span class="danger-badge">报警信息共 <b>{{messCount}}</b> 条</span>
									</div>
									<div class="line-block-placeholder"></div>
									<div class="overall layout-media layout-home alarm-messages" v-loading="alarmsLoading">
										<div class="overall-meta" v-for="(item, index) in rtmpListData" :key="index" @click="showDialog(item)">
											<div class="overall-meta-pic">
												<img :src="item.pic_url" alt="">
											</div>
										</div>
									</div>
									<div class="line-block-placeholder"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bim-drawer-right">
			<div class="bim-drawer-content-wrapper site-base-bg">
				<div class="bim-drawer-content">
					<div class="bim-drawer-wrapper-body">
						<div class="bim-drawer-body">
							<div class="main-content-drawer">
								<div class="video-monitor">
									<div class="line-block-placeholder"></div>
									<div class="header-block">
										<h3 class="box-title">报警统计</h3>
									</div>

									<div class="statis-list">
										<div class="statis-list-item statis-total">
											<span class="danger-badge">周界总报警数：共 <b>{{messCount}}</b> 条</span>
										</div>
										<div class="statis-list-item statis-today">
											<span class="danger-badge">当天周界总报警数：共 <b>{{todayMessCount}}</b> 条</span>
										</div>
										<div class="statis-list-item statis-today-unhandle">
											<span class="danger-badge">当天未查看周界报警数：共 <b>{{todayUnMessCount}}</b> 条</span>
										</div>
									</div>
									<div class="line-block-placeholder"></div>
									<div class="alarm-messages layout-home" v-loading="alarmsLoading" v-if="alarms.length">
										<div class="alarm-meta" v-for="(item, index) in alarms" :key="item.id">
											<div class="alarm-meta-detail">
												<h3 class="alarm-meta-title">{{item.event_msg}}</h3>
												<div class="alarm-meta-description">
													<span class="datetime">{{item.created_at}}</span>
												</div>
												<div class="alarm-meta-opt">
													<button class="bim-btn bim-btn-scene" @click="handlerRead(item, index)">查看</button>
												</div>
											</div>
											<div class="alarm-meta-pic">
												<img :src="item.pic_url" alt="">
											</div>
										</div>
									</div>
									<div class="alarm-messages layout-home" style="display: flex;justify-content: center;align-items: center;color: #a7c7e1;font-size: 20px;" v-else>暂无当天报警数据</div>
								</div>
								<div class="line-block-placeholder"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog :visible.sync="dialogLiveVisible" :append-to-body="true" :show-close="false" custom-class="bim-dialog">
			<img :src="magnifierSrc" alt="">
		</el-dialog>
		<el-dialog
				:visible.sync="dialogLiveVisible1"
				:append-to-body="true"
				:show-close="false"
				destroy-on-close
				custom-class="bim-dialog">
			<div class="video-stream">
				<video-player
						playsinline
						class="vjs-custom-skin"
						:options="playerOptions"
						customEventName="changed"
						@ready="playerIsReady"
						@changed="playerStateChanged($event)"
				></video-player>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import "videojs-flash";
import "videojs-hotkeys";
export default {
	data () {
		return {
			playerOptions: {
				//playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
				autoplay: true, //如果true,浏览器准备好时开始回放。
				muted: false, // 默认情况下将会消除任何音频。
				loop: false, // 导致视频一结束就重新开始。
				preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
				language: 'zh-CN',
				aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
				fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
				height: '280',
				sources: [
					{
						type: "rtmp/mp4",
						src: "rtmp://58.200.131.2:1935/livetv/hunantv"
					}
				],
				techOrder: ['flash', 'html5'],
				poster: 'http://demo-dev.sadpu.com/uploads/media/logo_v3.png',
				controls: false,
				notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
			},
			baseWSUrl: 'ws://60.28.24.227:8282',
			websocket: null,
			visible: false,
			area: [{
				name: '加工区',
				type: 'xf'
			}, {
				name: '堆料区',
				type: 'xf'
			}, {
				name: '周界1',
				type: 'zj'
			}, {
				name: '周界2',
				type: 'zj'
			}, {
				name: '周界3',
				type: 'zj'
			}],
			showAny: 'xf',
			videoListData: {},
			dialogLiveVisible: false,
			dialogLiveVisible1: false,
			interval: null,
			listLoading: true,
			magnifierSrc: null,
			alarms: [],
			alarmsLoading: true,
			messCount: 0,
			todayMessCount: 0,
			todayUnMessCount: 0,
			rtmpListData: [
				{
					pic_url: 'http://demo-dev.sadpu.com/stream/stream_poster_1.pic_hd.jpg',
					stream_url: 'rtmp://47.104.233.210:61020/live/192.168.31.10'
				},
				{
					pic_url: 'http://demo-dev.sadpu.com/stream/stream_poster_2.pic_hd.jpg',
					stream_url: 'rtmp://47.104.233.210:61020/live/192.168.31.11'
				},
				{
					pic_url: 'http://demo-dev.sadpu.com/stream/stream_poster_3.pic_hd.jpg',
					stream_url: 'rtmp://47.104.233.210:61020/live/192.168.31.12'
				},
				{
					pic_url: 'http://demo-dev.sadpu.com/stream/stream_poster_4.pic_hd.jpg',
					stream_url: 'rtmp://47.104.233.210:61020/live/192.168.31.13'
				},
				{
					pic_url: 'http://demo-dev.sadpu.com/stream/stream_poster_5.pic_hd.jpg',
					stream_url: 'rtmp://47.104.233.210:61020/live/192.168.31.15'
				},
				{
					pic_url: 'http://demo-dev.sadpu.com/stream/stream_poster_6.pic_hd.jpg',
					stream_url: 'rtmp://47.104.233.210:61020/live/192.168.31.16'
				},
				{
					pic_url: 'http://demo-dev.sadpu.com/stream/stream_poster_7.pic_hd.jpg',
					stream_url: 'rtmp://47.104.233.210:61020/live/192.168.31.17'
				},
				{
					pic_url: 'http://demo-dev.sadpu.com/stream/stream_poster_8.pic_hd.jpg',
					stream_url: 'rtmp://47.104.233.210:61020/live/192.168.31.22'
				},
				{
					pic_url: 'http://demo-dev.sadpu.com/stream/stream_poster_9.pic_hd.jpg',
					stream_url: 'rtmp://47.104.233.210:61020/live/192.168.31.24'
				},
				{
					pic_url: 'http://demo-dev.sadpu.com/stream/stream_poster_10.pic_hd.jpg',
					stream_url: 'rtmp://47.104.233.210:61020/live/192.168.31.25'
				},
				{
					pic_url: 'http://demo-dev.sadpu.com/stream/stream_poster_11.pic_hd.jpg',
					stream_url: 'rtmp://47.104.233.210:61020/live/192.168.31.26'
				},
				{
					pic_url: 'http://demo-dev.sadpu.com/stream/stream_poster_12.pic_hd.jpg',
					stream_url: 'rtmp://47.104.233.210:61020/live/192.168.31.14'
				},
				{
					pic_url: 'http://demo-dev.sadpu.com/stream/stream_poster_13.pic_hd.jpg',
					stream_url: 'rtmp://47.104.233.210:61020/live/192.168.31.18'
				},
				{
					pic_url: 'http://demo-dev.sadpu.com/stream/stream_poster_14.pic_hd.jpg',
					stream_url: 'rtmp://47.104.233.210:61020/live/192.168.31.2'
				},
				{
					pic_url: 'http://demo-dev.sadpu.com/stream/stream_poster_15.pic_hd.jpg',
					stream_url: 'rtmp://47.104.233.210:61020/live/192.168.31.3'
				},
				{
					pic_url: 'http://demo-dev.sadpu.com/stream/stream_poster_16.pic_hd.jpg',
					stream_url: 'rtmp://47.104.233.210:61020/live/192.168.31.19'
				},
				{
					pic_url: 'http://demo-dev.sadpu.com/stream/stream_poster_17.pic_hd.jpg',
					stream_url: 'rtmp://47.104.233.210:61020/live/192.168.31.20'
				},
				{
					pic_url: 'http://demo-dev.sadpu.com/stream/stream_poster_18.pic_hd.jpg',
					stream_url: 'rtmp://47.104.233.210:61022/live/192.168.31.14'
				},
				{
					pic_url: 'http://demo-dev.sadpu.com/stream/stream_poster_19.pic_hd.jpg',
					stream_url: 'rtmp://47.104.233.210:61022/live/192.168.31.18'
				}
			],
			todayDate: new Date().getFullYear() + '-' + String(new Date().getMonth() + 1).padStart(2, '0') + '-' + String(new Date().getDate()).padStart(2, '')
		}
	},
	created () {
		const _self = this
		// _self.getVideoData()
		_self.getAlarms()
		_self.socketInit()
		_self.getMessCount()
		this.interval = setInterval(() => {
			if (!_self.visible) {
				_self.visible = true
			}
			clearInterval(_self.interval)
		}, 500)
	},
	beforeDestroy () {
		// this.over()
		if (this.interval) {
			clearInterval(this.interval)
		}
	},
	methods: {
		playerStateChanged (playerCurrentState) {
			console.log("example 5: state changed", playerCurrentState);
		},
		playerIsReady (player) {
			console.log("example 5 ready!", player);
			player.hotkeys({
				volumeStep: 0.1,
				seekStep: 5,
				enableModifiersForNumbers: false,
				fullscreenKey: function (event) {
					// override fullscreen to trigger when pressing the F key or Ctrl+Enter
					return event.which === 70 || (event.ctrlKey && event.which === 13);
				},
			});
		},
		getAlarms () {
			this.alarmsLoading = true
			this.$http.get('/api/report', {
				params: {
					rows: 10,
					event_type: 'perimeter',
					event_state: 1,
					start_time: this.todayDate + ' 00:00:00',
					end_time: this.todayDate + ' 23:59:59'
				}
			}).then(response => {
				this.alarms = response.data.data
				this.alarmsLoading = false
			})
		},
		socketInit () {
			const ws = new WebSocket(this.$wsUrl)
			const _self = this
			ws.onmessage = evt => {
				/* eslint-disable no-eval */
				const res = eval('(' + evt.data + ')')
				if (res.module === 'perimeter') {
					_self.alarms.splice(0, 0, res.data)
				}
			}
			ws.onclose = function () {
				// console.log('连接已关闭...')
			}
			this.over = () => {
				ws.close()
			}
		},
		getMessCount () {
			this.$http.get('/api/report/count', { params: { event_type: 'perimeter' } }).then(response => {
				this.messCount = response.data.data.count
			})
			this.$http.get('/api/report/count', {
				params: {
					event_type: 'perimeter',
					start_time: this.todayDate + ' 00:00:00',
					end_time: this.todayDate + ' 23:59:59'
				}
			}).then(response => {
				this.todayMessCount = response.data.data.count
			})
			this.$http.get('/api/report/count', {
				params: {
					event_type: 'perimeter',
					start_time: this.todayDate + ' 00:00:00',
					end_time: this.todayDate + ' 23:59:59',
					event_state: 1
				}
			}).then(response => {
				this.todayUnMessCount = response.data.data.count
			})
		},
		getVideoData () {
			let ws = new WebSocket(this.$wsUrl)
			ws.onopen = () => {
				const msg = {
					type: 'video_index'
				}
				ws.send(JSON.stringify(msg))
				// console.log('数据发送中...')
			}
			ws.onmessage = evt => {
				// console.log('数据已接收...')
				/* eslint-disable no-eval */
				const res = eval('(' + evt.data + ')')
				if (res.state === 'empty') return
				this.videoListData = res.data
				this.listLoading = false
			}
			ws.onclose = function () {
				// console.log('连接已关闭...')
			}
			this.over = () => {
				ws.close()
			}
		},
		ignoreConfirm (data, index) {
			this.$confirm('此操作将忽略此报警信息?', '提示', {
				confirmButtonText: '忽略',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let args = {
					report_id: data
				}
				this.$http.post('/api/report/ignore', args).then(response => {
					if (response.data.state === 'success') {
						this.alarms[index].event_state = 4
						this.$message({
							type: 'success',
							message: '操作成功!'
						})
					} else {
						this.$message({
							type: 'info',
							message: '操作失败!'
						})
					}
				}, err => {
					this.$message({
						type: 'info',
						message: '操作失败!' + err
					})
				})
			})
		},
		sendMessage (data, index, type) {
			let msg = type === 'done' ? '此报警信息是否处理完成?' : '此操作将处理此报警信息?'
			let state = type === 'done' ? 3 : 2
			var self = this

			self.$confirm(msg, '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let args = {
					report_id: data
				}
				self.$http.post('/api/report/deal', args).then(response => {
					if (response.data.state === 'success') {
						self.alarms[index].event_state = state
						self.$message({
							type: 'success',
							message: '操作成功!'
						})
					} else {
						self.$message({
							type: 'info',
							message: '操作失败!'
						})
					}
				}, err => {
					self.$message({
						type: 'info',
						message: '操作失败!' + err
					})
				})
			})
		},
		filterData (args) {
			this.showAny = args
		},
		showDialog (args) {
			this.playerOptions.sources[0].src = args.stream_url
			this.dialogLiveVisible1 = true
		},
		handlerRead (item, index) {
			var self = this
			self.dialogLiveVisible = true
			self.magnifierSrc = item.pic_url
			self.$http.post('/api/report/set_read', { report_id: item.id }).then(response => {
				if (response.data.state === 'success') {
					self.alarms.splice(index, 1)
				}
			})
		}
	},
	mounted () {
	},
	computed: {
		filterArea: function () {
			const _self = this
			return _self.area.filter(item => {
				return item.type === _self.showAny
			})
		}
	}
}
</script>

<style lang="scss">
.overall {
	height: 850px;
	&-meta {
		float: left;
		width: 218px;
		height: 126px;
		border: 2px solid #7e9fc2;
		margin-bottom: 34px;
		position: relative;

		&-pic {
			border: 2px solid #132436;

			img {
				width: 210px;
				height: 118px;
				display: block;
			}
		}

		&:nth-child(2n) {
			margin-left: 20px;
		}

		&:before {
			content: '';
			position: absolute;
			width: 44px;
			height: 44px;
			background: url("../../assets/play.png") no-repeat;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			cursor: pointer;
		}
	}
}
</style>
